<template>
	<view class="propsers-detail" v-if="loading">
		<view class="detail-margin"></view>
		<scroll-view scroll-y="true"
					 class="scroll-Y">
			<view class="detail-info">
				<view class="info-head">
					<view><image style="width: 120rpx;height: 120rpx;border-radius: 100%;" :src="proUserData.avatar" mode="aspectFill"></image></view>
					<view class="head-base">
						<view class="base-nickname">{{proUserData.nickname}}</view>
						<view class="base-sign">{{proUserData.sign}}</view>
					</view>
				</view>
				<view class="info-base">
					<view class="base-context">
						<view class="context-text" v-if="proUserData.sex === '男'">他的Uid:</view>
						<view class="context-text" v-else-if="proUserData.sex === '未知'">它的Uid:</view>
						<view class="context-text" v-else>她的Uid:</view>
						<view class="context-matter">{{proUserData.uid}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</view>
						<view class="context-matter">{{proUserData.sex}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</view>
						<view class="context-matter">{{proUserData.age}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">婚姻状况:</view>
						<view class="context-matter">{{proUserData.marry}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">居住情况:</view>
						<view class="context-matter">{{proUserData.live}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">养宠经验:</view>
						<view class="context-matter">{{proUserData.exp}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">生活状态:</view>
						<view class="context-matter">{{proUserData.life}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">手机号码:</view>
						<view class="context-matter">{{proUserData.phone}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</view>
						<view class="context-matter">{{proUserData.address}}</view>
					</view>
					<view class="base-context">
						<view class="context-text">留&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言:</view>
						<view class="context-block">{{proUserData.remark}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="detail-operation">
			<button v-if="proUserData.disuse === 1" class="operation-btn1" @click="outClick()">淘汰</button>
			<button class="operation-btn1" @click="phoneClick(proUserData.phone)">电话</button>
			<button class="operation-btn1">私信</button>
			<button v-if="proUserData.disuse === 1" class="operation-btn2" @click="chooseClick()">选TA</button>
			<button v-if="proUserData.disuse !== 1" class="operation-btn2" @click="cancelClick(proUserData.disuse)">撤销</button>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				applyId: 0,
				proUserData: {},
				loading: false
			}
		},
		onLoad (option) {
			this.applyId = parseInt(option.applyId)
			console.log(option)
		},
		mounted () {
			this.getProUer(this.applyId)
		},
		methods: {
			// 电话按钮的点击
			phoneClick (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			// 淘汰按钮的点击
			outClick () {
				this.getOut(this.applyId)
			},
			// 选中按钮的点击
			chooseClick () {
				this.getChoose(this.applyId)
			},
			// 撤销按钮的点击
			cancelClick (disuse) {
				// 根据disuse状态来判断撤销选中还是撤销淘汰
				// 为2时撤销选中
				// 为-1时撤销淘汰
				if (disuse === 2) {
					this.getCancel(this.applyId, '确定要撤销此用户的选中状态吗?')
				} else if (disuse === -1) {
					this.getCancel(this.applyId, '确定要撤销此用户的淘汰状态吗?')
				}
			},
			// 加载中
			showLoading () {
				this.loading = false
				uni.showLoading({
				    title: '正在加载中',
					mask: true
				});
			},
			// 加载成功
			hideLoading () {
				uni.showToast({
				    title: '加载成功',
					icon: 'success',
					mask: true,
					complete: () =>{
						uni.hideLoading();
						this.loading = true
					}
				});
			},
			// 获取申请人详情
			async getProUer (applyId) {
				this.showLoading()
				await this.$request(this.commonApi.proListUser + applyId, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						// 年龄
						if (items.data.age === 1) {
							items.data.age = '00后'
						} else if (items.data.age === 2) {
							items.data.age = '90后'
						} else if (items.data.age === 3) {
							items.data.age = '80后'
						} else if (items.data.age === 4) {
							items.data.age = '70后'
						} else {
							items.data.age = '未知'
						}
						// 养宠经验
						if (items.data.exp === 1) {
							items.data.exp = '无经验'
						} else if (items.data.exp === 2) {
							items.data.exp = '学习中'
						} else if (items.data.exp === 3) {
							items.data.exp = '经验丰富'
						} else {
							items.data.exp = '未知'
						}
						// 生活状态
						if (items.data.life === 1) {
							items.data.life = '工作'
						} else if (items.data.life === 2) {
							items.data.life = '学生'
						} else if (items.data.life === 3) {
							items.data.life = '自由'
						} else if (items.data.life === 4) {
							items.data.life = '退休'
						} else {
							items.data.life = '未知'
						}
						// 居住情况
						if (items.data.live === 1) {
							items.data.live = '自主'
						} else if (items.data.live === 2) {
							items.data.live = '整租'
						} else if (items.data.live === 3) {
							items.data.live = '合租'
						} else {
							items.data.live = '未知'
						}
						// 婚姻状况
						if (items.data.marry === 1) {
							items.data.marry = '单身'
						} else if (items.data.marry === 2) {
							items.data.marry = '恋爱'
						} else if (items.data.marry === 3) {
							items.data.marry = '已婚'
						} else {
							items.data.marry = '未知'
						}
						// 性别
						if (items.data.sex === 1) {
							items.data.sex = '男'
						} else if (items.data.sex === 0) {
							items.data.sex = '女'
						} else if (items.data.sex === -1) {
							items.data.sex = '未知'
						}
						this.proUserData = items.data
						this.hideLoading()
					}
				})
			},
			// 淘汰
			getOut (applyId) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要淘汰此用户吗?',
				    success: function (res) {
				        if (res.confirm) {
							that.$request(that.commonApi.userDisuse + applyId, 'POST').then(res => {
								let items = res.data
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									that.getProUer(applyId)
									uni.showToast({
										title: '这个用户已被您淘汰！',
										icon: 'none'
									})
								}
							})
				        }
				    }
				})
			},
			// 选中
			getChoose (applyId) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要选中此用户吗?',
				    success: function (res) {
				        if (res.confirm) {
							that.$request(that.commonApi.userChoose + applyId, 'POST').then(res => {
								let items = res.data
								console.log(items)
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									that.getProUer(applyId)
									uni.showToast({
										title: '这个用户已被您选中！',
										icon: 'none'
									})
									uni.navigateTo({
									    url: '../../../index/agreement/petAgreement?agreementId=' + items.data.agreementId
									});
								}
							})
				        }
				    }
				})
			},
			// 撤销
			getCancel (applyId, title) {
				let that = this
				uni.showModal({
				    title: '提示',
					content: title,
				    success: function (res) {
				        if (res.confirm) {
							that.$request(that.commonApi.cancelDisuse + applyId, 'POST').then(res => {
								let items = res.data
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									that.getProUer(applyId)
									uni.showToast({
										title: '您已撤销成功!',
										icon: 'none'
									})
								}
							})
				        }
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.propsers-detail {
		.detail-margin {
			width: 100%;
			height: 2rpx;
			background-color: #EDEDED;
		}
		.scroll-Y {
			height: calc(100vh - 20rpx - 124rpx);
		}
		.detail-info {
			.info-head {
				padding: 30rpx;
				display: flex;
				.head-base {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.base-nickname {
						font-size: 36rpx;
						font-weight: 700;
						color: #333333;
						line-height: 50rpx;
						letter-spacing: 2rpx;
					}
					.base-sign {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						width: 530rpx;
					}
				}
			}
			.info-base {
				padding: 10rpx 30rpx 30rpx 30rpx;
				.base-context {
					width: 100%;
					display: flex;
					padding: 20rpx;
					.context-text {
						width: 120rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 36rpx;
						margin-right: 30rpx;
					}
					.context-matter {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
					}
					.context-block {
						width: 526rpx;
						background: #F9F9F9;
						border-radius: 12rpx;
						padding: 20rpx;
					}
				}
			}
		}
		.detail-operation {
			width: 100%;
			position: absolute;
			bottom: 0;
			padding: 30rpx;
			display: flex;
			justify-content: space-around;
			button {
				font-size: 28rpx;
				margin: 0;
			}
			button::after {
				border: none;
			}
			.operation-btn1 {
				width: 140rpx;
				height: 64rpx;
				background: #F6F6F6;
				border-radius: 12rpx;
				color: #333333;
				line-height: 64rpx;
				text-align: center;
			}
			.operation-btn2 {
				width: 210rpx;
				height: 64rpx;
				background: #FFBB00;
				border-radius: 12rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}
</style>
